<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span style="font-weight: 700">创建考试</span>
      <el-button
        plain
        type="primary"
        style="float: right"
        @click="$router.push('/exam/exam')"
        size="small"
        >返回列表</el-button
      >
    </div>
    <el-form
      label-width="350px"
      :model="formData"
      ref="formRef"
      :rules="formRules"
      :inline="false"
      size="normal"
    >
      <el-form-item label="考试名称" prop="exam_name">
        <el-input
          v-model="formData.exam_name"
          style="width: 700px"
          placeholder="请输入考试名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="考试类型" prop="exam_type">
        <el-radio v-model="formData.exam_type" :label="text[0].id">{{
          text[0].value
        }}</el-radio>
        <el-radio v-model="formData.exam_type" :label="text[1].id">{{
          text[1].value
        }}</el-radio>
      </el-form-item>
      <el-form-item label="锁屏方式" prop="lock_screen">
        <el-radio v-model="formData.lock_screen" :label="lock[0].id">{{
          lock[0].value
        }}</el-radio>
        <el-radio v-model="formData.lock_screen" :label="lock[1].id">{{
          lock[1].value
        }}</el-radio>
      </el-form-item>
      <el-form-item label="归属学科" prop="subject_id">
        <el-select
          v-model="formData.subject_id"
          style="width: 200px"
          placeholder="归属学科"
          clearable
        >
          <el-option
            v-for="item in treeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @click.native="treeClick(item.id)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="归属目录" prop="directory_id">
        <el-select
          v-model="formData.directory_id"
          style="width: 200px"
          placeholder="归属目录"
          no-data-text="无数据"
          clearable
        >
          <el-option
            v-for="item in childTreeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
            @click.native="paperClick(item.id)"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="考试时长">
        <el-input-number
          v-model="formData.exam_time"
          :min="1"
          :max="180"
          label="描述文字"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="试卷信息" prop="main_paper_id">
        <el-select
          v-model="formData.main_paper_id"
          style="width: 200px"
          placeholder="归属目录"
          clearable
          :disabled="paperList === ''"
          no-data-text="没有考卷信息"
        >
          <el-option
            v-for="item in paperList"
            :key="item.id"
            :label="item.paper_name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="btnOk">立即创建</el-button>
        <el-button @click="resetOk">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { getExamPaperApi, getExamTree, addExamApi } from "@/api/exam";
export default {
  name: "addExam",
  data() {
    return {
      text: [
        {
          value: "阶段考核",
          id: 1,
        },
        {
          value: "综合考核",
          id: 2,
        },
      ],

      // 锁屏方式
      lock: [
        {
          value: "不锁屏",
          id: 1,
        },
        {
          value: "锁屏",
          id: 2,
        },
      ],
      treeList: [], // 归属学科列表
      childTreeList: [], // 归属目录列表
      paperList: "", // 试卷信息列表
      formData: {
        directory_id: "", // 归属目录
        exam_name: "", // 考试名称
        exam_time: 30, // 考试时长
        exam_type: 1, // 考试类型
        lock_screen: 1, // 锁屏方式
        main_paper_id: "", // 试卷信息
        subject_id: "", // 归属学科
      },
      formRules: {
        exam_name: [
          { required: true, message: "请输入考试名称", trigger: "blur" },
        ],
        exam_type: [{ required: true, trigger: "blur" }],
        lock_screen: [{ required: true, trigger: "blur" }],
        subject_id: [{ required: true, trigger: "change" }],
        directory_id: [{ required: true, trigger: "change" }],
        main_paper_id: [{ required: true, trigger: "change" }],
      },
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async initData() {
      // 获取归属学科下拉框数据
      let res = await getExamTree();
      this.treeList = res;
    },
    // 获取学科目录下拉框数据
    treeClick(id) {
      this.childTreeList = this.treeList.filter(
        (item) => item.id === id
      )[0].children;
    },
    async paperClick(id) {
      let { list } = await getExamPaperApi({
        subject_id: 1,
        directory_id: id,
        show_state: 1,
      });
      this.paperList = list;
    },
    // 添加提交事件
    async btnOk() {
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      await addExamApi(this.formData);
      this.$message.success("新增考试成功");
    },
    resetOk() {
      this.formData = {
        directory_id: "", // 归属目录
        exam_name: "", // 考试名称
        exam_time: 30, // 考试时长
        exam_type: 1, // 考试类型
        lock_screen: 1, // 锁屏方式
        main_paper_id: "", // 试卷信息
        subject_id: "", // 归属学科
      };
      this.$refs.formRef.resetFields();
    },
  },
};
</script>
